<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格巨兽 - Java Web程序设计</title>
    <link href="https://cdn.tailwindcss.com" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600&family=Press+Start+2P&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="stylesheet">
  
    <style>
        /* 基础样式 */
        body {
            background-color: #E8F4F8;
            background-image: 
                url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231565C0' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            font-family: 'Noto Sans SC', sans-serif;
            color: #1565C0;
        }
        
        /* 导航栏 */
        .navbar {
            background-color: rgba(255,255,255,0.8);
            border-bottom: 3px solid #1565C0;
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .back-button {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #1565C0;
            font-weight: 600;
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            transition: all 0.2s ease;
            border: 2px solid transparent;
        }
        
        .back-button:hover {
            background-color: rgba(21, 101, 192, 0.1);
            border-color: #1565C0;
        }
        
        .nav-title {
            font-family: 'Press Start 2P', cursive;
            font-size: 1.2rem;
            color: #1565C0;
        }
        
        .player-mini {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            background-color: rgba(21, 101, 192, 0.1);
            padding: 0.5rem 1rem;
            border-radius: 30px;
        }
        
        .player-mini-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #E94560;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid white;
            color: white;
        }
        
        .player-mini-info {
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        /* 主要内容区 */
        .main-container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
            display: grid;
            grid-template-columns: 1fr 3fr;
            gap: 2rem;
        }
        
        /* 怪兽信息卡 */
        .monster-card {
            background: linear-gradient(145deg, #1E88E5 0%, #1565C0 100%);
            border-radius: 16px;
            border: 3px solid #1565C0;
            padding: 1.5rem;
            color: white;
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
            position: sticky;
            top: 80px;
            height: fit-content;
        }
        
        .monster-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .monster-avatar-large {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 5px solid rgba(255,255,255,0.5);
            margin-bottom: 1rem;
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
        }
        
        .monster-avatar-large i {
            font-size: 4rem;
            animation: gridSpin 3s linear infinite;
        }
        
        @keyframes gridSpin {
            0% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.1); }
            100% { transform: rotate(360deg) scale(1); }
        }
        
        .monster-name-large {
            font-family: 'Press Start 2P', cursive;
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            text-align: center;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }
        
        .monster-level-badge {
            background-color: rgba(0,0,0,0.2);
            padding: 0.3rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        
        .monster-stats {
            width: 100%;
            background-color: rgba(255,255,255,0.1);
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .stat-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.8rem;
            padding-bottom: 0.8rem;
            border-bottom: 1px dashed rgba(255,255,255,0.2);
        }
        
        .stat-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        
        .stat-label {
            font-size: 0.9rem;
            opacity: 0.9;
        }
        
        .stat-value {
            font-weight: 600;
        }
        
        .weakness-box {
            background-color: rgba(255,214,0,0.2);
            border: 2px solid #FFD600;
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .weakness-title {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #FFD600;
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 1rem;
        }
        
        .weakness-content {
            font-size: 0.9rem;
            line-height: 1.5;
        }
        
        .challenge-button {
            width: 100%;
            background-color: rgba(255,255,255,0.3);
            border: 2px solid rgba(255,255,255,0.5);
            color: white;
            border-radius: 30px;
            padding: 1rem;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            box-shadow: 0 4px 0 rgba(0,0,0,0.15);
        }
        
        .challenge-button:hover {
            background-color: rgba(255,255,255,0.4);
            transform: translateY(-2px);
            box-shadow: 0 6px 0 rgba(0,0,0,0.2);
        }
        
        /* 知识点内容区 */
        .content-section {
            background-color: white;
            border-radius: 16px;
            border: 2px solid #1565C0;
            padding: 2rem;
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }
        
        .content-header {
            margin-bottom: 2rem;
            border-bottom: 2px dashed #1565C0;
            padding-bottom: 1rem;
        }
        
        .content-title {
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #1565C0;
        }
        
        .content-subtitle {
            font-size: 1.1rem;
            color: #1E88E5;
            opacity: 0.9;
        }
        
        .content-block {
            margin-bottom: 2.5rem;
        }
        
        .block-title {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #1565C0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .block-content {
            font-size: 1.05rem;
            line-height: 1.7;
            color: #333;
            margin-bottom: 1.5rem;
        }
        
        .block-content p {
            margin-bottom: 1rem;
        }
        
        .block-content strong {
            color: #1565C0;
        }
        
        .example-box {
            background-color: #f8fafc;
            border-radius: 10px;
            border: 1px solid #e2e8f0;
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        
        .example-header {
            background-color: #1565C0;
            color: white;
            padding: 0.8rem 1rem;
            font-weight: 600;
            font-size: 0.9rem;
            display: flex;
            justify-content: space-between;
        }
        
        .example-tabs {
            display: flex;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .example-tab {
            padding: 0.8rem 1.2rem;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            border-bottom: 3px solid transparent;
        }
        
        .example-tab.active {
            color: #1565C0;
            border-bottom-color: #1565C0;
        }
        
        .example-content {
            padding: 1rem;
        }
        
        .code-block {
            background-color: #1e293b;
            color: #e2e8f0;
            border-radius: 6px;
            padding: 1rem;
            overflow-x: auto;
            margin-bottom: 1rem;
        }
        
        .table-preview {
            border-collapse: collapse;
            width: 100%;
            margin: 1rem 0;
        }
        
        .table-preview th, .table-preview td {
            border: 2px solid #1565C0;
            padding: 0.8rem;
            text-align: center;
        }
        
        .table-preview th {
            background-color: #e0f2fe;
            font-weight: 600;
        }
        
        .table-preview td {
            background-color: #f0f9ff;
        }
        
        .highlight-cell {
            background-color: #bae6fd !important;
            animation: cellPulse 2s infinite alternate;
        }
        
        @keyframes cellPulse {
            from { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.5); }
            to { box-shadow: 0 0 0 5px rgba(56, 189, 248, 0); }
        }
        
        /* 互动练习区 */
        .exercise-box {
            background-color: #e0f2fe;
            border-radius: 10px;
            border: 2px dashed #1565C0;
            padding: 1.5rem;
            margin-top: 2rem;
        }
        
        .exercise-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #1565C0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .exercise-description {
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }
        
        .code-input {
            width: 100%;
            min-height: 180px;
            padding: 1rem;
            border: 2px solid #1565C0;
            border-radius: 6px;
            font-family: monospace;
            font-size: 0.9rem;
            margin-bottom: 1rem;
            resize: vertical;
        }
        
        .exercise-feedback {
            padding: 1rem;
            border-radius: 6px;
            margin-bottom: 1rem;
            display: none;
        }
        
        .feedback-success {
            background-color: #dcfce7;
            border: 2px solid #16a34a;
            color: #15803d;
            display: block;
        }
        
        .feedback-error {
            background-color: #fee2e2;
            border: 2px solid #dc2626;
            color: #b91c1c;
            display: block;
        }
        
        .exercise-actions {
            display: flex;
            gap: 1rem;
        }
        
        .exercise-button {
            padding: 0.8rem 1.5rem;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
        }
        
        .submit-button {
            background-color: #1565C0;
            color: white;
        }
        
        .submit-button:hover {
            background-color: #0d47a1;
        }
        
        .reset-button {
            background-color: #e2e8f0;
            color: #64748b;
        }
        
        .reset-button:hover {
            background-color: #cbd5e1;
        }
        
        /* 相关关卡 */
        .related-levels {
            margin-top: 3rem;
        }
        
        .levels-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
        
        .related-card {
            background-color: white;
            border-radius: 10px;
            border: 2px solid #1565C0;
            padding: 1rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            text-decoration: none;
            color: #1565C0;
            transition: all 0.3s ease;
        }
        
        .related-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            background-color: #f0f9ff;
        }
        
        .related-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(21, 101, 192, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .related-info {
            flex-grow: 1;
        }
        
        .related-name {
            font-weight: 600;
            margin-bottom: 0.2rem;
        }
        
        .related-desc {
            font-size: 0.85rem;
            color: #64748b;
        }
        
        .related-arrow {
            color: #1565C0;
            opacity: 0.7;
        }
        
        /* 粒子特效 */
        .particle-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        .particle {
            position: absolute;
            background-color: rgba(255,255,255,0.6);
            border-radius: 50%;
            opacity: 0;
        }
        
        /* 响应式适配 */
        @media (max-width: 992px) {
            .main-container {
                grid-template-columns: 1fr;
            }
            
            .monster-card {
                position: static;
                max-width: 500px;
                margin: 0 auto;
            }
        }
        
        @media (max-width: 768px) {
            .nav-title {
                font-size: 1rem;
            }
            
            .content-section {
                padding: 1.5rem;
            }
            
            .content-title {
                font-size: 1.5rem;
            }
            
            .block-title {
                font-size: 1.2rem;
            }
            
            .levels-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 480px) {
            .nav-container {
                flex-wrap: wrap;
                gap: 1rem;
            }
            
            .player-mini {
                margin-left: auto;
            }
            
            .monster-avatar-large {
                width: 120px;
                height: 120px;
            }
            
            .monster-avatar-large i {
                font-size: 3.5rem;
            }
            
            .exercise-actions {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="index.html" class="back-button">
                <i class="fa fa-arrow-left"></i>
                <span>返回关卡列表</span>
            </a>
            <div class="nav-title">网格巨兽 - 详情页</div>
            <div class="player-mini">
                <div class="player-mini-avatar">
                    <i class="fa fa-user"></i>
                </div>
                <div class="player-mini-info">
                    编程学徒 LV.1
                </div>
            </div>
        </div>
    </nav>
    
    <!-- 主要内容区 -->
    <div class="main-container">
        <!-- 怪兽信息卡 -->
        <div class="monster-card">
            <div class="monster-header">
                <div class="monster-avatar-large">
                    <i class="fa fa-table"></i>
                </div>
                <h2 class="monster-name-large">网格巨兽</h2>
                <div class="monster-level-badge">LV.2</div>
            </div>
            
            <div class="monster-stats">
                <div class="stat-item">
                    <span class="stat-label">生命值</span>
                    <span class="stat-value">200</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">攻击力</span>
                    <span class="stat-value">30</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">防御力</span>
                    <span class="stat-value">15</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">技能</span>
                    <span class="stat-value">单元格合并</span>
                </div>
            </div>
            
            <div class="weakness-box">
                <div class="weakness-title">
                    <i class="fa fa-bolt"></i>
                    <span>致命弱点</span>
                </div>
                <div class="weakness-content">
                    网格巨兽的身体由无数单元格组成，它能通过合并单元格改变形态。使用<span style="color:#FFD600; font-weight:bold">colspan</span>和<span style="color:#FFD600; font-weight:bold">rowspan</span>属性可以破解它的变形技能，使其结构崩溃。
                </div>
            </div>
            
            <button class="challenge-button" id="fightButton">
                <i class="fa fa-crosshairs"></i>
                开始战斗
            </button>
        </div>
        
        <!-- 知识点内容区 -->
        <div class="content-section">
            <div class="content-header">
                <h1 class="content-title">HTML表格的奥秘</h1>
                <div class="content-subtitle">掌握表格结构与单元格合并技巧，击败网格巨兽</div>
            </div>
            
            <div class="content-block">
                <h2 class="block-title">
                    <i class="fa fa-info-circle"></i>
                    怪兽特性分析
                </h2>
                <div class="block-content">
                    <p>网格巨兽是由HTML表格元素构成的强大怪兽，它的身体由&lt;table&gt;、&lt;tr&gt;（行）和&lt;td&gt;（单元格）等标签组成。它最危险的能力是可以通过<span style="color:#1565C0; font-weight:bold">合并单元格</span>改变自身形态，让挑战者难以预测它的结构。</p>
                    <p>要击败这只怪兽，你需要掌握表格的基本结构和单元格合并技术，理解如何使用rowspan和colspan属性来控制表格布局，从而破解它的变形能力。</p>
                </div>
            </div>
            
            <div class="content-block">
                <h2 class="block-title">
                    <i class="fa fa-book"></i>
                    核心知识点
                </h2>
                <div class="block-content">
                    <p><strong>1. 表格的基本结构</strong></p>
                    <p>HTML表格由以下核心标签组成：</p>
                    <ul style="margin-left: 1.5rem; margin-bottom: 1rem; line-height: 1.6;">
                        <li>&lt;table&gt; - 定义表格容器</li>
                        <li>&lt;tr&gt; - 定义表格行</li>
                        <li>&lt;td&gt; - 定义表格单元格</li>
                        <li>&lt;th&gt; - 定义表头单元格（通常加粗居中显示）</li>
                        <li>&lt;thead&gt;、&lt;tbody&gt;、&lt;tfoot&gt; - 分别定义表格的表头、主体和页脚部分</li>
                    </ul>
                    
                    <div class="example-box">
                        <div class="example-header">基础表格示例</div>
                        <div class="example-tabs">
                            <div class="example-tab active">代码</div>
                            <div class="example-tab">预览</div>
                        </div>
                        <div class="example-content">
                            <pre class="code-block"><code class="language-html">&lt;table border="1"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;姓名&lt;/th&gt;
      &lt;th&gt;年龄&lt;/th&gt;
      &lt;th&gt;职业&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;张三&lt;/td&gt;
      &lt;td&gt;25&lt;/td&gt;
      &lt;td&gt;程序员&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;李四&lt;/td&gt;
      &lt;td&gt;30&lt;/td&gt;
      &lt;td&gt;设计师&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>

                            <table class="table-preview">
                                <thead>
                                    <tr>
                                        <th>姓名</th>
                                        <th>年龄</th>
                                        <th>职业</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>张三</td>
                                        <td>25</td>
                                        <td>程序员</td>
                                    </tr>
                                    <tr>
                                        <td>李四</td>
                                        <td>30</td>
                                        <td>设计师</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <p><strong>2. 单元格合并技术</strong></p>
                    <p>网格巨兽最擅长的技能是单元格合并，这也是击败它的关键所在：</p>
                    <ul style="margin-left: 1.5rem; margin-bottom: 1rem; line-height: 1.6;">
                        <li><strong>colspan</strong> - 横向合并单元格，指定当前单元格跨越的列数</li>
                        <li><strong>rowspan</strong> - 纵向合并单元格，指定当前单元格跨越的行数</li>
                    </ul>
                    
                    <div class="example-box">
                        <div class="example-header">单元格合并示例</div>
                        <div class="example-tabs">
                            <div class="example-tab active">代码</div>
                            <div class="example-tab">预览</div>
                        </div>
                        <div class="example-content">
                            <pre class="code-block"><code class="language-html">&lt;table border="1"&gt;
  &lt;tr&gt;
    &lt;th colspan="3"&gt;横向合并3列&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th rowspan="3"&gt;纵向合并3行&lt;/th&gt;
    &lt;td&gt;数据1&lt;/td&gt;
    &lt;td&gt;数据2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;数据3&lt;/td&gt;
    &lt;td&gt;数据4&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;数据5&lt;/td&gt;
    &lt;td&gt;数据6&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>

                            <table class="table-preview">
                                <tr>
                                    <th colspan="3" class="highlight-cell">横向合并3列</th>
                                </tr>
                                <tr>
                                    <th rowspan="3" class="highlight-cell">纵向合并3行</th>
                                    <td>数据1</td>
                                    <td>数据2</td>
                                </tr>
                                <tr>
                                    <td>数据3</td>
                                    <td>数据4</td>
                                </tr>
                                <tr>
                                    <td>数据5</td>
                                    <td>数据6</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    
                    <p><strong>注意事项：</strong>当使用合并单元格时，要确保表格的结构仍然保持完整。合并n个单元格后，该行或该列就会减少n-1个单元格，否则会导致表格结构错乱，这也是网格巨兽的弱点所在。</p>
                </div>
            </div>
            
            <!-- 互动练习区 -->
            <div class="exercise-box">
                <h3 class="exercise-title">
                    <i class="fa fa-puzzle-piece"></i>
                    挑战练习：破解网格巨兽的防御
                </h3>
                <div class="exercise-description">
                    网格巨兽使用了复杂的单元格合并来构建防御阵型。请修改下面的代码，使用colspan和rowspan属性完成表格布局，破解它的防御：
                    <br><br>
                    <strong>任务要求：</strong>
                    <ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
                        <li>1. 将"角色属性"单元格横向合并2列</li>
                        <li>2. 将"生命值"单元格纵向合并2行</li>
                        <li>3. 将"攻击力"和"防御力"所在的单元格合并为一个单元格</li>
                    </ul>
                </div>
                
                <textarea class="code-input" id="codeExercise">&lt;table border="1"&gt;
  &lt;tr&gt;
    &lt;th&gt;角色属性&lt;/th&gt;
    &lt;th&gt;&lt;/th&gt;
    &lt;th&gt;数值&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;生命值&lt;/td&gt;
    &lt;td&gt;基础值&lt;/td&gt;
    &lt;td&gt;100&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;加成值&lt;/td&gt;
    &lt;td&gt;50&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;攻击力&lt;/td&gt;
    &lt;td&gt;防御力&lt;/td&gt;
    &lt;td&gt;30/20&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</textarea>

                <div class="exercise-feedback" id="feedback"></div>
                
                <div class="exercise-actions">
                    <button class="exercise-button submit-button" id="submitCode">提交答案</button>
                    <button class="exercise-button reset-button" id="resetCode">重置</button>
                </div>
            </div>
            
            <!-- 相关关卡 -->
            <div class="related-levels">
                <h2 class="block-title">
                    <i class="fa fa-link"></i>
                    相关关卡
                </h2>
                <div class="levels-grid">
                    <a href="level1.html" class="related-card">
                        <div class="related-avatar">
                            <i class="fa fa-html5"></i>
                        </div>
                        <div class="related-info">
                            <div class="related-name">标签怪 (LV.1)</div>
                            <div class="related-desc">HTML基础标签知识，网格巨兽的前身</div>
                        </div>
                        <div class="related-arrow">
                            <i class="fa fa-arrow-left"></i>
                        </div>
                    </a>
                    
                    <a href="level3.html" class="related-card">
                        <div class="related-avatar">
                            <i class="fa fa-wpforms"></i>
                        </div>
                        <div class="related-info">
                            <div class="related-name">数据收集者 (LV.3)</div>
                            <div class="related-desc">表单元素知识，网格巨兽的进化形态</div>
                        </div>
                        <div class="related-arrow">
                            <i class="fa fa-arrow-right"></i>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 粒子特效生成函数
        function createParticles() {
            const monsterCard = document.querySelector('.monster-card');
            const container = document.createElement('div');
            container.classList.add('particle-container');
            monsterCard.appendChild(container);
            
            function spawnParticle() {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                
                const size = Math.random() * 6 + 2;
                const startPosX = Math.random() * 100;
                const startPosY = -10;
                
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.left = `${startPosX}%`;
                particle.style.top = `${startPosY}%`;
                
                container.appendChild(particle);
                
                // 动画
                setTimeout(() => {
                    particle.style.transition = `all ${Math.random() * 3 + 2}s linear`;
                    particle.style.transform = `translateY(${monsterCard.offsetHeight}px)`;
                    particle.style.opacity = '0.8';
                }, 10);
                
                // 清理
                setTimeout(() => {
                    particle.remove();
                }, 5000);
            }
            
            // 定时生成粒子
            setInterval(spawnParticle, 300);
            // 初始生成一批粒子
            for (let i = 0; i < 5; i++) {
                setTimeout(spawnParticle, i * 300);
            }
        }
        
        // 练习代码验证
        function initExercise() {
            const codeInput = document.getElementById('codeExercise');
            const feedback = document.getElementById('feedback');
            const originalCode = codeInput.value;
            
            document.getElementById('submitCode').addEventListener('click', () => {
                const code = codeInput.value;
                
                // 简单验证逻辑（实际应用中可更复杂）
                const hasColspan = code.includes('colspan="2"') && code.includes('角色属性');
                const hasRowspan = code.includes('rowspan="2"') && code.includes('生命值');
                const hasMergedCell = code.includes('colspan="2"') && code.includes('攻击力');
                
                if (hasColspan && hasRowspan && hasMergedCell) {
                    feedback.textContent = "恭喜！你成功破解了网格巨兽的防御阵型！它的结构正在崩溃，准备发起最后一击！";
                    feedback.className = "exercise-feedback feedback-success";
                    
                    // 成功动画
                    createExplosion();
                } else {
                    let errorMsg = "防御未被破解！请检查：";
                    if (!hasColspan) errorMsg += " 1. 未正确横向合并\"角色属性\"单元格";
                    if (!hasRowspan) errorMsg += " 2. 未正确纵向合并\"生命值\"单元格";
                    if (!hasMergedCell) errorMsg += " 3. 未合并\"攻击力\"和\"防御力\"单元格";
                    
                    feedback.textContent = errorMsg;
                    feedback.className = "exercise-feedback feedback-error";
                }
            });
            
            document.getElementById('resetCode').addEventListener('click', () => {
                codeInput.value = originalCode;
                feedback.style.display = 'none';
            });
        }
        
        // 爆炸效果
        function createExplosion() {
            const monsterCard = document.querySelector('.monster-card');
            const explosion = document.createElement('div');
            explosion.classList.add('explosion-container');
            monsterCard.appendChild(explosion);
            
            for (let i = 0; i < 50; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                
                const size = Math.random() * 8 + 3;
                const angle = Math.random() * Math.PI * 2;
                const distance = Math.random() * 100 + 50;
                const endX = Math.cos(angle) * distance;
                const endY = Math.sin(angle) * distance;
                
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.left = '50%';
                particle.style.top = '50%';
                particle.style.transform = 'translate(-50%, -50%)';
                
                explosion.appendChild(particle);
                
                // 动画
                setTimeout(() => {
                    particle.style.transition = `all 0.8s ease-out`;
                    particle.style.transform = `translate(${endX}px, ${endY}px)`;
                    particle.style.opacity = '0';
                }, 100);
            }
            
            // 清理
            setTimeout(() => {
                explosion.remove();
            }, 1000);
        }
        
        // 战斗按钮事件
        document.getElementById('fightButton').addEventListener('click', () => {
            const feedback = document.getElementById('feedback');
            if (feedback.classList.contains('feedback-success')) {
                alert('你成功击败了网格巨兽！获得了20点经验值和表格大师徽章！');
            } else {
                alert('请先完成练习，掌握破解网格巨兽的技巧后再挑战！');
            }
        });
        
        // 初始化
        window.addEventListener('DOMContentLoaded', () => {
            createParticles();
            initExercise();
            
            // 示例标签切换
            document.querySelectorAll('.example-tab').forEach(tab => {
                tab.addEventListener('click', () => {
                    const parent = tab.parentElement;
                    parent.querySelectorAll('.example-tab').forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');
                    
                    // 这里可以添加代码/预览切换逻辑
                });
            });
        });
    </script>
</body>
</html>